<template>
  <div>
    <div v-for="(item, idx) in list" :key="idx" class="list-data">
      <div class="top">
        <div class="top-name">
          <div>{{ item.educationName }}</div>
          <div>{{ item.speciality }}</div>
        </div>
        <div class="top-edit">
          <van-icon class="one" name="edit" @click="clickEdit(item)" />
          <van-icon class="two" name="delete-o" @click="clickDelete(item.educationName)" />
        </div>
      </div>
      <div class="topTwo">
        <div>{{ item.startTime }}-{{ item.endTime }}</div>
      </div>
      <div class="topThree">
        <div>证明人</div>
        <div>{{ item.certifier }}</div>
      </div>
      <div class="topThree">
        <div>证明人电话</div>
        <div>{{ item.mobile }}</div>
      </div>
    </div>
    <educat-form ref="educatForm" @educatValue="educatValue" />
  </div>
</template>
<script>
import educatForm from './educat-form.vue'
import Dialog from '@/wxcomponents/vant/dialog/dialog'
export default {
  components: { educatForm },
  props: {
    educatList: {
      type: [Array],
    },
  },
  data() {
    return {
      list: this.educatList,
    }
  },
  watch: {
    educatList: {
      handler(newVal, oldVal) {
        this.list = newVal
      },
    },
  },
  methods: {
    // 编辑
    clickEdit(item) {
      this.$refs.educatForm.edit(item)
    },
    educatValue(item) {
      if (!item.isEdit) {
        this.list.push(item)
      }
      this.$emit('trainList', this.list)
    },
    // 删除
    clickDelete(name) {
      Dialog.confirm({
        title: '标题',
        message: '确定删除？',
      }).then(() => {
        for (const [idx, item] of this.list.entries()) {
          if (name === item.educationName) {
            this.list.splice(idx, 1)
          }
        }
        this.$emit('trainList', this.list)
      }).catch(() => {
        console.log('取消')
      })
    },
    open() {
      this.$refs.educatForm.open()
    },
  },
}
</script>
  <style lang="scss" scoped>
  .list-data{
      width: 93%;
      height:126px;
      box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
      border-radius: 2px;
      margin: 10px auto;
      .top{
          display: flex;
          justify-content: space-between;
          padding: 10px 10px 5px 10px;
          .top-name{
              display: flex;
              align-items: center;
              div:nth-child(1){
                  color:#333;
                  font-size: 16px;
                  font-weight: 600;
              }
              div:nth-child(2){
                  font-size: 14px;
                  color:#739ECA;background:#f1f5f9;
                  border:1px solid #b2c9e2;
                  margin-left: 10px;
                  height: 16px;
                  line-height: 16px;
                  padding: 0px 3px;
              }
          }
          .top-edit{
              .one{
                  color:#739ECA
              }
              .two{
                  color:red;
                  margin-left:5px;
              }
          }
      }
      .topTwo{
          display: flex;
          font-size: 12px;
          color: #999;
          padding: 0px 10px 0px 10px;
          height: 13px;
          line-height: 13px;
          div:nth-child(1){
              padding-right:5px;
          }
      }
      .topThree,.bottom{
          display: flex;
          justify-content: space-between;
          padding: 10px 10px 5px 10px;
          font-size: 14px;
          color:#333;
      }
  }
  </style>
